<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/master.css" />
		<script type="text/javascript" src="js/rem.js"></script>
	</head>
	<body>
		<div class="container">
			<header class="around-head">
				<h3>附近</h3>
			</header>
			<div class="content around-content">
				<ul class="around-list">
					<li class="target">全部</li>
					<li>餐厅</li>
					<li>咖啡</li>
					<li>文娱</li>
					<li>甜品</li>
					<li>购物</li>
					<li>夜生活</li>
				</ul>
				<ul class="around-bigbox">
					<li>
						<figure>
							<img src="img/around-1.jpg">
							<figcaption>
								<dt>在海淀建材市场里吃日料</dt>
								<dd>
									<p class="adress">海淀区</p>
									<div class="details">
										<p class="name">任曦居酒屋</p>
										<p class="number">￥140 | 1032m</p>
									</div>
								</dd>
							</figcaption>
						</figure>
					</li>
					<li>
						<figure>
							<img src="img/around-1.jpg">
							<figcaption>
								<dt>在海淀建材市场里吃日料</dt>
								<dd>
									<p class="adress">海淀区</p>
									<div class="details">
										<p class="name">任曦居酒屋</p>
										<p class="number">￥140 | 1032m</p>
									</div>
								</dd>
							</figcaption>
						</figure>
					</li>
				</ul>
			</div>
			<footer>
				<a href="recommend-beijing.html"><span class="iconfont icon-gouwo"></span>推荐</a>
				<a href="tips.html"><span class="iconfont icon-qingdan"></span>攻略</a>
				<a href="serach-restaurant.html"><span class="iconfont icon-sousuo "></span>搜索</a>
				<a href=""><span class="iconfont icon-icon-yuanxk target-span"></span>附近</a>
				<a href="mine.html"><span class="iconfont icon-wode"></span>我的</a>
			</footer>
		</div>
		<script type="text/javascript">
			let lis = document.querySelectorAll(".around-list li");
			for (let i = 0; i < lis.length; i++) {
				lis[i].onclick = function() {
					for (let j = 0; j < lis.length; j++) {
						lis[j].classList.remove("target");
					}
					this.classList.add("target");
				}
			}
		</script>
	</body>
</html>
